<template>
	<view class="forget">
		<view class="f-title">找回密码</view>
		<m-input :type="'account'" :placeholder="'手机号'" v-model="params.mobile" :maxlength="11"></m-input>
		<m-input :type="'authCode'" :placeholder="'验证码'" v-model="params.code" :maxlength="4">
			<button class="f-btn" :disabled="btnDis" @tap="handleSendCode()">{{btnText}}</button>
		</m-input>
		<m-input :type="'password'" :placeholder="'输入新密码'" v-model="params.newPass" :maxlength="20"></m-input>
		<m-input :type="'password'" :placeholder="'确认密码'" v-model="params.surePass" :maxlength="20"></m-input>
		<button class="f-reset"  @tap="handleReset()">重置密码</button>
		<view class="go-login" @tap="goPage()">去登陆</view>
	</view>
</template>

<script>
	import MInput from '@/components/m-input.vue'
	export default {
		name: "forget",
		data() {
			return {
				params: {
					mobile: "",
					code: "",
					newPass: "",
					surePass: ""
				},
				btnText: "发送验证码",
				t: null,
				btnDis: false
			}
		},
		components: {
			MInput
		},
		methods: {
			async handleSendCode() {
				uni.showLoading({})
				let resData = await this.$apis.getMobileCode({mobile: this.params.mobile})
				if (resData.code === 0) {
					this.countDown()
				}
				uni.hideLoading()
			},
			async handleReset() { // 重置密码提交
				if (this.params.mobile === '' || this.params.code === '' || this.params.newPass === '' || this.params.surePass === '') {
					uni.showToast({
						title: "请将信息填写完整",
						icon: "none",
					})
					return
				}
				let reg = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
				if (!reg.test(this.params.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none",
					})
					return
				}
				if (this.params.newPass !== this.params.surePass) {
					uni.showToast({
						title: "两次输入的新密码不一致",
						icon: "none",
					})
					return
				}
				uni.showLoading({});
				let resData = await this.$apis.forgetPassword({
					mobile: this.params.mobile,
					code: this.params.code,
					password: this.params.newPass,
					rePassword: this.params.surePass,
					small_type:1
				})
				if (resData.code === 0) {
					uni.showToast({
						title: "操作成功",
						icon: "success",
					})
					// let user_data = await this.$apis.getUserInfo({access_token: ''})
					// await this.$store.commit("SET_USERINFO", user_data.data)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 2000)
				}
				uni.hideLoading()
			},
			countDown() {
				this.t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(this.t);
				this.btnText = `剩余${timer}s`;
				this.t = setInterval(() => {
					if (timer == 0) {
						clearInterval(this.t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `剩余${timer}s`;
				}, 1000)
			},
			goPage() {
				uni.navigateTo({
					url: 'login',
					success() {

					}
				})
			},

		}


	}
</script>

<style lang="less" scoped>
	.forget{
		.f-title{
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			margin-top: 50rpx;
		}
		.f-btn{
			box-sizing: border-box;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			align-self: center;
			color: #ffffff;
			font-size: 26rpx;
			padding: 0rpx 20rpx;
			background:linear-gradient(to top,rgba(236,69,55,1),rgba(251,171,102,1));
		}
		/* .f-btn::after{
			border: none;
		} */
		.f-reset{
			width: 400rpx;
			height: 80rpx;
			background:linear-gradient(to top,rgba(236,69,55,1),rgba(251,171,102,1));
			color: #ffffff;
			line-height: 80rpx;
			font-size: 34rpx;
			margin-top: 100rpx;
		}
		button::after{
			border:none
		}
		.go-login{
			margin-top: 40rpx;
			text-align: center;
			font-size:30rpx ;
			color:#666666 ;
		}
	}
</style>
